<template>
    <div id="EnvironmentalTraining">
        <div class="jx-training-list">
            <el-row :gutter="40">
                <el-col :span="6"  v-for="(item, index) in courseList" :key="index">
                    <div class="list-box" @click="GoDetail(item)">
                        <div class="list-img">
                            <img :src="item.iconUrl" />
                        </div>
                        <div class="list-content">
                            <div class="content-title" v-text="item.trainingName"></div>
                            <div class="content-title2" v-text="item.trainingSource"></div>
                            <div class="content-text" v-text="item.description"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-dialog :close-on-click-modal="false"  class="dialog-virtual" title="提示" :visible.sync="dialogVirtual" width="460px">
            <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>有其它实验正在进行中，是否停止它进入该实验?</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="VirtualSave">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                trainingData: '',
                // 是否进入实验显示隐藏
                dialogVirtual: false,
                courseList:[]
            }
        },
        created () {
            let self = this

            // 环境实训列表
            self.InitTrainingList()
        },
        methods: {
            // 环境实训列表
            InitTrainingList() {
                let self = this

                self.$http.get('/tes/training').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 环境实训列表复制
                        self.courseList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            GoDetail(item) {
                let self = this
                let routeData
                self.$http.get('/tes/experiment/training/'+item.trainingId+'/prompt').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data){
                            self.trainingData = item
                            // 弹窗是否强制跳转
                            self.dialogVirtual = true
                        }else{
                            let newWindow = window.open()
                            // 跳转实验页
                            routeData = self.$router.resolve({
                                name: "StudentVirtualMachine",
                                query: {
                                    trainingId: item.trainingId,
                                    trainingName: item.trainingName
                                }
                            })
                            // window.open(routeData.href, '_blank')
                            newWindow.location.href = routeData.href
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 确定跳转实验详情
            VirtualSave(){
                let self = this
                let newWindow = window.open()
                let routeData
                // 跳转实验页
                routeData = self.$router.resolve({
                    name: "StudentVirtualMachine",
                    query: {
                        trainingId: self.trainingData.trainingId,
                        trainingName: self.trainingData.trainingName
                    }
                })
                // window.open(routeData.href, '_blank')
                newWindow.location.href = routeData.href
                window.location.reload()
            },
        }
    }
</script>
<style>
    .dialog-virtual .el-dialog__footer{
        text-align: center;
    }
</style>
<style lang="scss" scoped>
    // 进入实验提示
    .dialog-virtual{
        .dialog-content{
            text-align: center;
            i{
                font-size: 50px;
                color: #d6d6d6;
                display: block;
                margin-top: 25px;
            }
            p{
                font-size: 14px;
                color: #727272;
            }
        }
    }
    #EnvironmentalTraining{
        .jx-training-list{
            width: 1200px;
            margin: 40px auto 0;
            padding: 20px 45px;
            .el-col{
                height: 280px;
                border-radius: 5px;
                margin-bottom: 50px;
                .list-box{
                    cursor: pointer;
                    transition: all 0.3s;
                    &:hover{
                        transform: scale(1.05);
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
                    }
                }
                .list-img{
                    width: 100%;
                    height: 130px;
                    line-height: 130px;
                    text-align: center;
                    border-radius: 5px 5px 0 0;
                    background: #485f8c;
                }
                .list-content{
                    height: 150px;
                    background: #fff;
                    overflow: hidden;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

                    .content-title{
                        font-size: 15px;
                        color: #385899;
                        margin-top: 22px;
                        text-align: center;
                        font-weight: bold;
                    }
                    .content-title2{
                        text-align: center;
                        font-size: 14px;
                        color: #888888;
                        margin-top: 16px;
                    }
                    .content-text{
                        font-size: 12px;
                        color: #888888;
                        line-height: 16px;
                        padding: 0 25px;
                        margin-top: 12px;
                        height: 32px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }
    }
</style>

